import React from 'react';

import { PlusOutlined } from '@ant-design/icons';
import { Button, Input } from 'antd';
import { useState } from 'react';
import { useModel } from 'umi';
let socket;
const Websocket: React.FC<{}> = () => {
  const [inputValue, setInputValue] = useState(''); // 新建和编辑提示框
  const [message, setMessage] = useState('');

  const stompClient = null;

  const { socket1, userOnelineList } = useModel('chatModel', (model) => ({
    socket1: model.socket,
    userOnelineList: model.userOnelineList,
  }));
  console.log(socket1, userOnelineList);
  const connect = () => {
    //地址+端点路径，构建websocket链接地址,注意，对应config配置里的addEndpoint

    const socketUrl = WS_URL + '/ws/webSocket/ceshi1';
    console.log(WS_URL, '---WS_URL--');

    if (typeof WebSocket == 'undefined') {
      console.log('您的浏览器不支持WebSocket');
    } else {
      console.log('您的浏览器支持WebSocket');

      if (socket != null) {
        socket.close();
        socket = null;
      }

      socket = new WebSocket(socketUrl);

      socket.onopen = function () {
        console.log('websocket已打开');
      };

      socket.onmessage = function (msg) {
        // console.log('收到数据====' + msg.data);
        setMessage(msg.data);
      };

      socket.onclose = function () {
        console.log('websocket已关闭');
      };
      //发生了错误事件
      socket.onerror = function () {
        console.log('websocket发生了错误');
      };
    }
  };
  return (
    <div>
      <h1>websocket测试</h1>
      <Button
        key="button"
        icon={<PlusOutlined />}
        onClick={() => {
          // console.log(selectedRows, '---选取多行----');
          // 1.清空form
          connect();
          console.log('ceshi1---');
        }}
        type="primary"
      >
        websocket链接
      </Button>
      <Button
        key="edit"
        icon={<PlusOutlined />}
        onClick={() => {
          console.log(stompClient, '---选取多行----');
          // 1.清空form
          socket.send(inputValue); // 将组装好的json发送给服务端，由服务端进行转发
        }}
        type="primary"
      >
        获取输入框的值
      </Button>
      <Input
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="Basic usage"
      />
      <h1> {message}</h1>
    </div>
  );
};
export default Websocket;
